<script setup lang="ts">
import {RouterLink, RouterView} from 'vue-router'
import {useCounterStore} from '@/stores/counter.js'
import {BellFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {getIsWarnListAPI} from "@/axios/api";

interface use {
  goodName: string
  goodNumber: number
}

const counterStore = useCounterStore()
const list = counterStore.list
const token = counterStore.token
const router = useRouter()
const drawer = ref(false)//通知
const collapse_list = ref<Array<use>>([])//存放预警信息数据
function LoginExit() {//退出登录
  counterStore.token = null
  router.push({
    path: '/login'
  })
}

function drawerTrue() {//通知
  getIsWarnList()
  drawer.value = true
}

function getIsWarnList() {
  getIsWarnListAPI().then(data => {
    collapse_list.value = data.data.data
    console.log(data)
  })
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="top">
          <!--    标题-->
          <div class="title">
            <h1>
              <router-link
                  :to="{
                    path:'/home'
                  }"
              >
                企业ERP进销存管理系统
              </router-link>
            </h1>
          </div>
          <div class="state">
            <!--      通知-->
            <div
                class="message"
                @click="drawerTrue"
            >
              <el-icon
                  :size="20"
                  color="white"
              >
                <BellFilled/>
              </el-icon>
              <el-tag
                  round
                  size="small"
                  effect="dark"
                  type="danger"
                  v-show="counterStore.getIsWarn!=0"
              >
                {{ counterStore.getIsWarn }}
              </el-tag>
            </div>
            <!--      用户-->
            <div class="user">
              <div class="user_name">
                {{counterStore.userName==""?'用户名':`用户名:${counterStore.userName}`}}
              </div>
              <div
                  class="login_exit"
                  @click="LoginExit"
              >
                退出登录
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="sidebar">
            <div class="sidebar_title">
              系统菜单
            </div>
            <div class="list">
              <div v-for="(item,index) in list" :key="index">
                <router-link
                    :to="{
                        path:item.path
                    }"
                    class="list_item_a"
                >
                  {{ item.text }}
                </router-link>
              </div>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="container">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-drawer
        v-model="drawer"
        title="消息通知"
    >
      <el-collapse>
        <el-collapse-item
            v-for="(item,index) in collapse_list"
            :name="index"
        >
          <template #title>
            <span style="font-size: 16px">
              商品名称：{{ item.name }}
            </span>
          </template>
          <div style="font-size: 16px">
            预警数量：{{ item.number }}，库存数量：{{item.stockNumber}}
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<style scoped>
.el-header {
  background-color: #205fbc;
  height: 50px;
}

.top,
.state,
.user {
  display: flex;
  justify-content: space-between;
}

.top {
  height: 100%;
  align-items: center;
}

.title {
  font-size: 11px;
}

.title a {
  color: white;
}

.message {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}

.user {
  cursor: pointer;
}

.user:hover .login_exit {
  top: 50px;
}

.user_name {
  line-height: 50px;
  max-width: fit-content;
  min-width: 70px;
  text-align: center;
  cursor: pointer;
  color: white;
  background-color: #205fbc;
  padding: 0 10px;
  z-index: 2;
}

.login_exit {
  width: 70px;
  color: white;
  background-color: #205fbc;
  height: 50px;
  line-height: 50px;
  position: absolute;
  z-index: 1;
  top: 1px;
  padding: 0 10px;
  transition: 0.5s;
}


.sidebar_title,
.list_item_a {
  padding-left: 18%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sidebar_title {
  color: grey;
}

a {
  color: black;
}

.list_item_a {
  color: black;
}

.list .active-router {
  background-color: #d9ecff;
  border-right: 2px solid blue;
  color: #409EFF;
}

.el-main {
  padding: 0;
  border-left: 1px solid #dedfe0;
}
</style>
